<template>
	<view>
		<nearbyImage :title="'附近门店'"></nearbyImage>
		<view class="search">
			<input type="text" placeholder="输入需要搜索的内容"/>
			<image src="../../static/车联网服务-03车辆维修-02附近门店_slices/搜索.png"></image>
		</view>
		<view class="search-suggestions">
			<span class="suggestion1">历史记录:</span> 
			<view v-for="(item,index) in suggestionList" :key="index">
				<span class="suggestion">{{item}}</span>
			</view>
		</view>
		<view class="stores" v-for="(item,index) in storeList" :key="index" @click="carWash">
				<view class="top">
					<span style="font-size: 42rpx;">{{item.name}}</span>
					<view>
						<image v-for="(_, i) in item.score"  
          :key="i" :src="item.scoreUrl"></image>
						<span style="margin-left: 10rpx;">{{item.score}}分</span>
					</view>
					<view class="sales">
						销量:<span>{{item.sales}}</span>
					</view>
					<span class="right-top">{{item.distance}}m</span>
				</view>
				<image :src="item.url" class="container"></image>
				<view class="container-right">
					营业时间:<span>{{item.businessHours}}</span></br>
					<span>{{item.TimePeriod}}</span></br>
					<span>{{item.location}}</span>
				</view>
		
		</view>
		<view class="buttom">--暂无更多--</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				suggestionList:["飞飞汽车美容店","飞飞汽车美容店","飞飞汽车美容店","飞飞汽车美容店"],
				storeList:[
					{
						name:"车百事汽车生活馆",
						score:5,
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						distance:"556",
						sales:"556",
						url:"../../static/车联网服务-03车辆维修-02附近门店_slices/附近门店.png",
						businessHours:"周一至周五",
						TimePeriod:"早上8:00-晚上22:00",
						location:"山阳区人民路与解放路交叉口"
					},
					{
						name:"车百事汽车生活馆",
						score:5,
						scoreUrl:"../../static/车联网服务-03车辆维修-02附近门店_slices/五星 拷贝.png",
						distance:"556",
						sales:"556",
						url:"../../static/车联网服务-03车辆维修-02附近门店_slices/附近门店.png",
						businessHours:"周一至周五",
						TimePeriod:"早上8:00-晚上22:00",
						location:"山阳区人民路与解放路交叉口"
					}
				]
			
			
			}
		},
		methods: {
			carWash(){
				uni.navigateTo({
					url:"/pages/carWash/carWash"
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		width:90%;
		height: 80rpx;
		background-color: white;
		position: relative;
		top: -400rpx;
		left:40rpx;
		padding: 0 10rpx 0 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		input{
			width:70%;
			height: 100%;
		}
		image{
			width:40rpx;
			height: 40rpx;
			position: absolute;
			left:590rpx;
		}
	}
	.search-suggestions {  
	    width: 90%;  
		display: flex;
		flex-wrap: wrap;
	    box-sizing: border-box;
		position: relative;
		top:-360rpx;
		left:40rpx;
	}
	.suggestion1{
		color: white;
		font-size: 36rpx; 
		font-weight: 550;
		
	}
	.suggestion {
	    margin: 0 10rpx 0 10rpx;
	    color: white;  
	}
	.stores{
		width:90%;
		height:400rpx;
		background-color: white;
		position: relative;
		top:-320rpx;
		left: 40rpx;
		border-radius: 30rpx;
		display: flex;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.top{
			width:350rpx;
			height:200rpx;
			margin-left: 20rpx;
			// display: flex;
			image{
				width:25rpx;
				height:25rpx;
				margin-right: 5rpx;
			}
			.sales{
				position: relative;
				top:-43rpx;
				left:240rpx;
			}
			.right-top{
				color: #1C81FD;
				position: relative;
				top:-120rpx;
				left:500rpx;
				font-weight: bold;
			}
		}
		.container{
			width:300rpx;
			height:200rpx;
			border-radius: 20rpx;
			position: absolute;
			top:150rpx
		}
		.container-right{
			width:310rpx;
			flex-wrap: wrap;
			position: absolute;
			top:150rpx;
			left:350rpx;
			font-size: 30rpx;
		}
	}
	.buttom{
		color: #787878;
		position:relative;
		top:-230rpx;
		left:310rpx;
	}
</style>
